import 'package:bmi_cal/icon_content.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:bmi_cal/components/resusable_card.dart';
import 'package:bmi_cal/components/result_page.dart';
import 'components/bottom_buttom.dart';

const Color cardColor = Color(0xFF1D1E33);
const Color inactiveCardColor = Color(0xFF111328);

enum Gender {
  male,
  female,
}

class InputPage extends StatefulWidget {
  const InputPage({super.key});

  @override
  State<InputPage> createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  Gender? selectGender; // 可选类型可以 默认是空，如果没有？程序会报错
  int height = 176;
  int weight = 65;
  int age = 18;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFF0A0E21),
          title: Center(
            child: Text(
              'BMI CALCULATOR',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        body: Column(
          children: [
            Expanded(
                child: Row(
              children: [
                Expanded(
                    child: GestureDetector(
                  onTap: () {
                    setState(() {
                      selectGender = Gender.male;
                    });
                  },
                  child: ReusableCard(
                    colour: selectGender == Gender.male
                        ? cardColor
                        : inactiveCardColor,
                    childCard: IconContent(
                        iconData: FontAwesomeIcons.mars, label: 'MALE'),
                  ),
                )),
                Expanded(
                    child: GestureDetector(
                  onTap: () {
                    setState(() {
                      selectGender = Gender.female;
                    });
                  },
                  child: ReusableCard(
                    colour: selectGender == Gender.female
                        ? cardColor
                        : inactiveCardColor,
                    childCard: IconContent(
                      iconData: FontAwesomeIcons.venus,
                      label: 'FAMALE',
                    ),
                  ),
                )),
              ],
            )),
            Expanded(
                child: ReusableCard(
              colour: cardColor,
              childCard: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'HEIGHT',
                    style: TextStyle(fontSize: 25.0, color: Color(0xFF8D8E98)),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: [
                      Text(
                        height.toString(),
                        style: TextStyle(
                            fontSize: 30.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                      Text(
                        'cm',
                        style: TextStyle(color: Colors.white),
                      )
                    ],
                  ),
                  SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                      inactiveTrackColor: Colors.white54,
                      activeTrackColor: Colors.red.shade300,
                      thumbColor: Colors.red,
                      overlappingShapeStrokeColor: Colors.red.shade50,
                      overlayShape:
                          RoundSliderOverlayShape(overlayRadius: 15.0),
                      thumbShape: RoundSliderThumbShape(
                          enabledThumbRadius: 10.0), // 设计滑条的大小
                    ),
                    child: Slider(
                        value: height.toDouble(),
                        min: 120.0,
                        max: 230.0,
                        onChanged: (double newValue) {
                          setState(() {
                            height = newValue.round();
                          });
                          ;
                        }),
                  ),
                ],
              ),
            )),
            Expanded(
                child: Row(
              children: [
                Expanded(
                    child: ReusableCard(
                  colour: cardColor,
                  childCard: Column(
                    children: [
                      Text(
                        "WEIGHT",
                        style:
                            TextStyle(fontSize: 15.0, color: Color(0xFF8D8E98)),
                      ),
                      Text(weight.toString(),
                          style: TextStyle(
                              fontSize: 25.0,
                              fontWeight: FontWeight.bold,
                              color: Colors.white)),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          RoundedIConButton(
                            icon: FontAwesomeIcons.plus,
                            onPressed: () {
                              setState(() {
                                if (weight <= 200) {
                                  weight++;
                                }
                              });
                            },
                          ),
                          SizedBox(
                            width: 20.0,
                          ),
                          RoundedIConButton(
                            icon: FontAwesomeIcons.minus,
                            onPressed: () {
                              setState(() {
                                if (weight >= 10) {
                                  weight--;
                                }
                              });
                            },
                          ),
                        ],
                      )
                    ],
                  ),
                )),
                Expanded(
                    child: ReusableCard(
                  colour: cardColor,
                  childCard: Column(
                    children: [
                      Text(
                        "AGE",
                        style:
                            TextStyle(fontSize: 15.0, color: Color(0xFF8D8E98)),
                      ),
                      Text(age.toString(),
                          style: TextStyle(
                              fontSize: 25.0,
                              fontWeight: FontWeight.bold,
                              color: Colors.white)),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          RoundedIConButton(
                            icon: FontAwesomeIcons.plus,
                            onPressed: () {
                              // onPressed 方法在RoundedIconButton是stless，但是这个组建放在Statefull的weight里面。
                              setState(() {
                                if (age < 200) {
                                  age++;
                                }
                              });
                            },
                          ),
                          SizedBox(
                            width: 20.0,
                          ),
                          RoundedIConButton(
                            icon: FontAwesomeIcons.minus,
                            onPressed: () {
                              setState(() {
                                if (age >= 1) {
                                  age--;
                                }
                              });
                            },
                          ),
                        ],
                      )
                    ],
                  ),
                )),
                
              ],
            )),
            BottomButtom(title: 'CALulate', onPressed: (){
              Navigator.push(context, MaterialPageRoute(builder: (context)=>ResultPage()));
            },),
          ],
        ));
  }
}


// 自定义组建
class RoundedIConButton extends StatelessWidget {
  const RoundedIConButton({required this.icon, required this.onPressed});

  final IconData icon;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      elevation: 6.0,
      //button大小
      constraints: BoxConstraints.tightFor(width: 30.0, height: 30.0),
      onPressed: onPressed,
      shape: CircleBorder(),
      child: Icon(
        icon,
        color: Colors.white,
      ),
      fillColor: Colors.white30,
    );
  }
}
